<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>限免专区</title>
		<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
	</head>

	<body style="background-color: #fff">
		<div style="margin-bottom: 1rem;">
			<img src="img/banner.png" style="width: 100%;" alt="" />
		</div>
		<div id="free_list_item">
		</div>
	</body>

	<style type="text/css">
		.toFlip {
			display: none;
		}
		
		.txt img {
			width: 100%;
		}
	</style>
	<script id="free_tem" type="text/html">
		{{each data.book_list}}
		<div class="col-xs-12 bookdetail" style="min-height:12rem;height:auto;width:100%;padding:1rem;" {{if $value.bookchapter}} data-updateIndex = {{$value.bookchapter.sort}} {{/if}} data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
			<div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
				<a href="javascript:;" style="text-decoration: none;">
					<img src="{{$value.bookimg | addUrl}}" style="width:9.17rem;height:100%;box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;">
					<em style="position: absolute;display: block;width: 1.5rem;height: 1.5rem;bottom: 0.5rem;right: 1.8rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
				</a>
			</div>
			<div class="col-xs-8" style="position: relative;height:12rem;width:68.666666%;top:0rem;left:1rem;padding: 0.2rem 0.6rem 0.5rem 0rem;">
				<span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin: 0;font-size: 1.5rem;line-height:1.7rem;">{{$value.bookname}}</span>
				<p class="aui-ellipsis-2" style="position: relative;top:0.5rem;line-height:1.5rem;font-size:1.3rem;color: #666;margin-top: 0.33rem;height: 2.8rem;margin-bottom: 0;">{{if $value.bookchapter}} {{$value.bookchapter.chapternumber + " " + $value.bookchapter.chaptername}} {{else}} {{$value.bookrecommend}}{{/if}}</p>
				<div style="position:absolute;bottom: 0.8rem;">
					<span style="float:left;color: #666;font-size: 1.2rem;line-height: 1.3rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration}}</span>
				</div>
				<div class="begin-read" data-bookid={{$value.bookid}} style="position: absolute;right: 0.5rem;bottom: 0.5rem;width: 7.8rem;height:2.5rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #ED8434 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: white;line-height: 2.3rem;font-size:13px">
					开始阅读
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	
	<!--<script src="js/out7.js " type="text/javascript " charset="utf-8"></script>-->
	<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/zepto.js " type="text/javascript " charset="utf-8"></script>
	<script src="js/md5.js " type="text/javascript " charset="utf-8"></script>
	<script src="js/art-template.js " type="text/javascript " charset="utf-8 "></script>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/purl.js"></script>
	<script type="text/javascript">
		document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
    </script>
	<script type="text/javascript ">
		
		var getFreeBookList = function(){
				$.ajax({
				type: "get",
				url: hostUrl + "freeregion/list",
				async: true,
				success: function(data) {
					document.getElementsByTagName('img')[0].setAttribute('src',imgHosturl + data.data.banner);//封面
					var free_html = template("free_tem", data);
					$("#free_list_item").html(free_html);
				 }
			  });
		}
			getToken(getFreeBookList);
			
			$("#free_list_item").on('click', '.bookdetail', function() {
				window.location.href = "bookDetail.html?bookIsFree=1&bookid=" + $(this).attr('data-bookid') + "&updateIndex=" + $(this).attr('data-updateIndex') + "&videoauthorid=" + $(this).attr('data-videoauthorid') + "&copywriter=" + $(this).attr('data-copywriter');
			})
			$('#free_list_item').on('click','.begin-read',function(e){
				e.stopPropagation();
				e.cancelBubble=true;
				var parent=$(this).parents('.bookdetail')
				location.href = "chapter.html?bookIsFree=1&bookid=" + parent.attr('data-bookid') + "&updateIndex=" + parent.attr('data-updateIndex') + "&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg')+"&bookrecommend=" + parent.attr('data-bookrecommend');
			})
	</script>
</html>